<template>
  <!--图层-->
  <div class="layerBox" id="layerBox">
    <div class="menu" :style="'height:'+height+'px'">
      <div class="title" id="title">图层</div>
      <div class="item">
        <div :class="chooseComponent!=null &&chooseComponent.uuid==item.uuid?'menu__item_action':''" class="menu__item" v-for="item in panelDom.component" v-if="initOk" @click="$store.commit('setChooseComponent', item)">
          <span class="menu__icon"><i :class="item.icon"></i></span>
          <span class="menu_text">{{item.layerName}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "figureLayer",
        computed: {
            //主面板加载完成
            initOk(){
                return this.$store.state.initOk
            },
            //获取面板信息
            panelDom() {
                return this.$store.state.panelDom;
            },
            //当前选中的值
            chooseComponent(){
                return this.$store.state.chooseComponent
            },
        },

        data(){
            return{
                height:0,
            }
        },
        mounted() {
            this.height=document.getElementById("layerBox").offsetHeight-20
        }
    }
</script>

<style scoped lang="scss">
  .layerBox {
    width: 150px;
    height: 100%;
    background:#545c64;
    display: flex;
    flex-direction: column;
    .menu{
      height: 100%;
      width: 100%;
      color: #bcc8d4;
      background:#545c64;
      display: flex;
      flex-direction: column;
      .title {
        width: 100%;
        text-align: center;
        padding: 10px 0;
        font-size: 18px;
        background: #0C0C0C;
        color: white;
      }
      .item{
        width: 100%;
        flex: 1;
        overflow: hidden;
        overflow-y: auto;
        .menu__item {
          margin-top: 10px;
          margin-bottom: 1px;
          width: 100%;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          height: 48px;
          padding: 0 6px;
          position: relative;
          background: #2c343c;
          cursor: pointer;
          -webkit-box-flex: 0;
          -ms-flex: none;
          flex: none;
          font-size: 12px;
          .menu__icon {
            color: #409eff;
            margin-right: 10px;
            width: 53px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            display: block;
            border: 1px solid #3a4659;
            background: #282a30;
          }
          .menu_text{
            color: white !important;
          }
        }
        .menu__item:hover{
          background-color: #2d343c;
          border: 2px solid #00b3fb;
        }
        .menu__item_action{
          background-color: #2d343c;
          border: 2px solid #00b3fb;
        }
      }

    }

    ::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
    ::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: rgba(144,146,152,.3);
    }
    ::-webkit-scrollbar, ::-webkit-scrollbar-track-piece {
      background-color: transparent;
    }

  }
</style>
